
import React, { Component, PureComponent, forwardRef  } from 'react'
import { connect } from 'react-redux';
import { Button, Tooltip, Pagination, Table, Tag, Space, Drawer, DatePicker, Form, Input } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { Layout, Popover } from 'antd';
import Context from '@/plugins/utils/context'
import { nanoid } from 'nanoid'

import SelectDrawer from '@/components/SelectDrawer'
import FormSearch from '@/components/FormSearch'
import MainTable from '../MainTable'

import './index.css'
import { values } from 'lodash';
const { Header, Footer, Sider, Content } = Layout;
class MainPage extends PureComponent {

  tableRef = React.createRef()

  getBtnArea = () => {
    if(Array.isArray(this.props.children)){
      return this.props.children.find(r => r.props.name === 'benArea')
    }else if( this.props.children !== null && typeof this.props.children === 'object' ){
      if (this.props.children.props.name === 'btnArea') return this.props.children
    }
  }

  // selectedMenu = forwardRef((props, ref) => {
  //     const { tabList } = this.props
  //     const { pathname } = this.props.location || {}
  //     return (<Space direction="vertical" style={{ width: '100%' }}>
  //       {
  //         tabList.map((item, index) => {
  //           return (<Button
  //             type={pathname === item.path ? 'primary' : 'dashed'}
  //             size="small"
  //             key={index}
  //             block
  //             onClick={() => { this.props.history.push(item.path) }}
  //             children={item.name}
  //           />)
  //         })
  //       }
  //     </Space>)
  // })

  getSelectedMenu = (tabList, pathname) => {
    return (<Space direction="vertical" style={{ width: '100%' }}>
      {
        tabList.map((item, index) => {
          return (<Button
            type={pathname === item.path ? 'primary' : 'dashed'}
            size="small"
            key={index}
            block
            onClick={() => { this.props.history.push(item.path) }}
            children={item.name}
          />)
        })
      }
    </Space>)
  }

  clearSelection = () => {
    this.tableRef.current.clearSelection()
  }

  render() {
    const {
      tabList = [],
      ...rest
    } = this.props
    const { pathname = {} } = this.props.location
    console.log('重复 rendering ====                   发送到放松放松发送到')
    console.log(tabList)
    return (
      <>
        <Layout className="m-layout-wrap">
          <div className="m-layout-head clearBoth">
            <>
              {
                this.getBtnArea()
              }
            </>
            {/* <div class="clearBoth">
              {
                this.getBtnArea()
              }
            </div> */}
            {/* <div>
                <Context.Consumer>
                  {
                    (routeInfo) => {
                      return (
                        <Popover placement="bottomRight" content={this.getSelectedMenu(tabList, pathname)} title="已选菜单">
                          <Button size="small">{(routeInfo || {}).name}</Button>
                        </Popover>
                      )
                    }
                  }
                </Context.Consumer>
            </div> */}
          </div>
          <Content className="m-layout-content">
            <MainTable {...rest} ref={this.tableRef}/>
          </Content>
        </Layout>
      </>
    )
  }
}

const WrapMainPage = forwardRef((props, ref) => <MainPage {...props}/>)

export default connect(
  state => ({
    tabList: state.tabList
  }),
  null, null, { forwardRef: true }
)(WrapMainPage)
